<template>
	<view class="container">
		<template v-if="pays.petList.length > 0">
			<view class="content">
				<view class="list_box" v-for="(petItem,petIndex) in pays.petList" :key="petItem.id"
					@tap.stop="goSetPet(petItem.id)">
					<view class="list_box_content">
						<view class="pet_info">
							<image class="pet_info_img" :src="petItem.petAvatar" mode=""></image>
							<view class="pet_info_text">
								<view class="pet_info_name">{{petItem.petNickName}}
									<!-- <image v-if="petItem.sex != 2"
										:src="`${petItem.sex == 1 ? `${iconUrl}36.png`: `${iconUrl}35.png`}`" mode="">
									</image> -->
								</view>
								<view class="pet_info_age">
									<template v-if="petItem.variety || petItem.typeName">
										{{petItem.variety ? petItem.variety + " | " : petItem.typeName + " | " }}
									</template>
									{{petItem.sex == 2 ? '' : petItem.sex == 1 ? '母 | ' : '公 | '}}
									{{petItem.birthdayValue ? petItem.birthdayValue + ' | ' : ''}}
									{{petItem.ifVaccinate == 1 ? '未免疫' : '已免疫'}} |
									{{petItem.ifNeuter == 1 ? '未绝育' : '已绝育'}}
								</view>
								
							</view>
						</view>
						<view class="pet_btn" @tap.stop="petBtn(petItem)">
							<uni-icons v-if="!pays.query.select" type="right" :color="'#1A1A1A'" :size="20"></uni-icons>
							<image v-if="pays.query.select" :src="petItem.isSelect ? `${iconUrl}13.png`: `${iconUrl}12.png`"
								mode=""></image>
						</view>
					</view>
					<view class="pet_info_personality">
						<view class="pet_info_personality_left"></view>
						<view class="pet_info_personality_right">{{petItem.personality}}</view>
						
					</view>
					
				</view>
				<uni-load-more iconType="auto" :status="pays.loading" />
			</view>
		</template>
		<template v-if="pays.blankShow">
			<view class="blank_box">
				<image :src="`${iconUrl}54.png`" mode="widthFix"></image>
				<text>您还没有添加宠物～</text>
			</view>
		</template>
		<view class="foot">
			<view class="foot_btn_box">
				<template v-if="!pays.query.select">
					<view class="foot_btn foot_btn_one" @tap="goSetPet('')">添加宠物</view>
				</template>
				<template v-if="pays.query.select">
					<view class="foot_btn foot_btn_two" @tap="goSetPet('')">添加宠物</view>
					<view class="foot_btn foot_btn_three" @tap="submitPet">确定选择</view>
				</template>
			</view>
		</view>

	</view>

</template>

<script setup lang="ts">
	import { reactive, onMounted, computed, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { useOrderStoreToRefs } from "@/store/useOrderStore"
	const { petsInfo } = useOrderStoreToRefs()
	const { userInfo } = useUserStoreToRefs()
	/* interface petListItem {
		petNickName : string,
		petAvatar : string,
		birthdayValue : string
	} */
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const pays = reactive<{
		query : Partial<{
			select : string | boolean
		}>
		petList : []
		loading : string
		page : number
		limit : number
		selectPetArr : []
		blankShow : boolean
		type : string | number
	}>({
		query: {},
		petList: [],
		loading: 'more',
		page: 1,
		limit: 20,
		selectPetArr: [],
		blankShow: false,
		type: ''
	})

	onLoad((options) => {
		if (options.select) {
			pays.query.select = options.select
			uni.setNavigationBarTitle({
				title: '选择宠物'
			});
			pays.type = options.type
		}


	})
	onShow(() => {
		getPetList()
		scrollToTop()
	})

	const goSetPet = (id : any) => {
		uni.navigateTo({
			url: `/pages/petList/setPet/setPet?id=${id}`
		})
	}
	const getPetList = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		pays.loading = 'loading'
		const { data: { total = 0, records = [] } } : any = await api({
			method: 'get',
			url: `/mall/pet/page`,
			data: {
				page: pays.page,
				limit: pays.limit,
				type: pays.type
			}
		})
		if (records) {
			pays.petList = pays.page == 1 ? records : pays.petList.concat(records)

			pays.petList.forEach(item => {
				item.isSelect = false
				petsInfo.value.forEach(citem => {
					if (item.id == citem.id) {
						item.isSelect = true
					}
				})
			})
			if (!records.length || pays.petList.length >= total) {
				pays.loading = 'noMore'
			} else {
				pays.loading = 'more'
			}
			pays.blankShow = pays.petList.length > 0 ? false : true
			console.log(pays.petList, 'pays.petList')
		} else {
			pays.loading = 'more'
			pays.blankShow = true
		}
		uni.hideLoading()
	}
	const petBtn = (item) => {
		item.isSelect = item.isSelect ? false : true
	}
	const submitPet = () => {
		let petArr = pays.petList.filter(item => item.isSelect)
		petsInfo.value = petArr
		if(petsInfo.value.length <= 0) {
			uni.showToast({
				title: '请选择宠物！',
				icon: 'none'
			})
			return
		}
		uni.navigateBack()
	}
	const onDataInit = async () => {
		pays.page = 1
	}

	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		console.log('onPullDownRefresh');
		if (pays.loading == 'loading') {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await getPetList()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(async () => {
		console.log('onReachBottom');
		if (pays.loading == 'noMore') return false
		pays.page++
		await getPetList()
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		min-height: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.content {
		padding-top: 32rpx;
		.list_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 32rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			
		}
		.list_box_content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 1;
		}
		.pet_info_personality {
			display: flex;
			.pet_info_personality_left {
				width: 96rpx;
				margin-right: 16rpx;
			}
			.pet_info_personality_right {
				width: 494rpx;
				word-break: break-word;
				font-size: 26rpx;
				color: #7C807F;
				line-height: 1.3;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制显示的行数为2 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.pet_info {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;

			.pet_info_img {
				margin-right: 16rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;

			}

			.pet_info_text {
				color: #1B2120;

				.pet_info_name {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #1B2120;
					image {
						margin-left: 16rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}

				.pet_info_age {
					font-size: 26rpx;
					color: #7C807F;
				}
				
			}
			

		}

		.pet_btn {
			image {
				width: 48rpx;
				height: 48rpx;
			}

		}
	}

	.foot {
		line-height: 1;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 8rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		display: flex;
		justify-content: center;

		.foot_btn_box {
			display: flex;
			justify-content: center;
			width: 686rpx;

			.foot_btn {
				line-height: 88rpx;
				text-align: center;
				border-radius: 62rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}

			.foot_btn_one {
				width: 100%;
				background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
				color: #fff;
			}

			.foot_btn_two {
				margin-right: 8rpx;
				width: 327rpx;
				color: #FF6084;
				border: 2rpx solid #FF6084;
			}

			.foot_btn_three {
				width: 327rpx;
				background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
				color: #fff;
			}
		}
	}

	.blank_box {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 300rpx 0;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 400rpx;
			height: 400rpx;
			margin-bottom: 40rpx;
		}

		text {
			font-size: 32rpx;
			color: #1B2120;
		}

	}
</style>